<div class="form-container">
  <form
    class="seb-form"
    *ngIf="!isUpdated"
    [formGroup]="updateProductForm"
    #ngForm="ngForm"
    (ngSubmit)="updateProductForm.valid && updateProduct()"
    novalidate>
    <fieldset>
      <legend>SELECTED PRODUCT</legend>
      <div *ngIf="isUpdateFailed"
           class="alert-danger">
        {{errorMessage}}
      </div>
      <div class="form-group">
        <label><b>Product name</b>
          <input
            type="text"
            formControlName="productName"
            required />
        </label>
        <div *ngIf="f.productName.touched && f.productName.invalid || ngForm.submitted && f.productName.invalid"
             class="alert-danger">
          <div *ngIf="f.productName.errors.required">Product name is required.</div>
          <div *ngIf="f.productName.errors.minlength">Product should be at least 3 characters long.</div>
          <div *ngIf="f.productName.errors.maxlength">Product should not exceed 20 characters.</div>
        </div>
      </div>
      <div class="form-group">
        <label><b>What age categories of people would the product suit?</b> <br />
          <label *ngFor="let ageBracket of ageBracketsData; let i = index">
            <input
              type="checkbox"
              name="ageBrackets"
              [checked]="this.updateProductForm.value.ageBrackets.includes(ageBracket.value)"
              [value]="ageBracket.value"
              (change)="onCheckboxChange($event)" />
            {{ageBracket.name}} <br />
          </label>
        </label>
        <div *ngIf="ngForm.submitted && f.ageBrackets.errors?.required"
             class="alert-danger">
          You should select at least one age category.
        </div>
      </div>
      <div class="form-group">
        <label><b>What income categories of people would the product suit?</b> <br />
          <label *ngFor="let incomeBracket of incomeBracketsData; let i = index">
            <input
              type="checkbox"
              name="incomeBrackets"
              [checked]="this.updateProductForm.value.incomeBrackets.includes(incomeBracket.value)"
              [value]="incomeBracket.value"
              (change)="onCheckboxChange($event)" />
            {{incomeBracket.name}} <br />
          </label>
        </label>
        <div *ngIf="ngForm.submitted && f.incomeBrackets.errors?.required"
             class="alert-danger">
          You should select at least one income category.
        </div>
      </div>
      <div class="form-group">
        <label>
          <b>Is the product going to be aimed at students?</b>
          <label> <br />
            <input
              type="radio"
              formControlName="student"
              name="student"
              value="true" />
            Yes</label>
          <label>
            <input
              type="radio"
              formControlName="student"
              name="student"
              value="false" />
            No</label>
        </label>
        <div *ngIf="ngForm.submitted && f.student.invalid"
             class="alert-danger">
          <div *ngIf="f.student.errors.required">You should select either yes or no.</div>
        </div>
      </div>
      <div class="form-group">
        <input
          type="submit"
          value="Update product" />
        <button
          routerLink=".."
          class="back-button"
        >Go back</button>
      </div>
    </fieldset>
  </form>
  <div *ngIf="isUpdated">
    <div class="alert-big-success">The product has been successfully updated!</div>
    <button
      class="back-button"
      routerLink=".."
    >Go back</button>
  </div>
</div>
